<template>
  <div class="auto-scolltable text-normal" style="">
    <div
      class="table-top flex full-width justify-between active-bg size18 text-color bold brlr"
      style="padding: 10px"
    >
      <div
        class="text-normal"
        style=""
        v-for="(item, index) in tabHead"
        :key="index"
        :style="`width:${item.width ? item.width + '%' : '25%'}`"
      >
        {{ item.title }}
      </div>
    </div>
    <div v-if="list.length == 0" class="text-center text-color pdtb40 size18">
      暂无呼叫来电!
    </div>
    <vueSeamlessScroll
      :data="list"
      class="auto-scolltable"
      style="overflow: hidden; height: 260px"
      :option-class="seamlessScrollOption"
    >
      <ul style="margin: 0; line-height: 35px" v-if="list.length">
        <li
          class="flex full-width justify-between pointer hover-active size16 border-bottom"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="text-normal text-color" style="width: 33%">
            <i class="el-icon-phone color-success"></i>
            {{ item.caller }}
          </div>
          <div class="text-normal" style="width: 47%">
            {{ item.answerTime }}
          </div>
          <div class="text-normal text-shadow text-color" style="width: 15%">
            {{ item.talkDuration }}
          </div>
        </li>
      </ul>
    </vueSeamlessScroll>

    <slot />
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tabHead: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: { vueSeamlessScroll },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  data() {
    return {};
  }
};
</script>
<style lang="scss">
.brlr {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.auto-scolltable {
  height: 250px;
  //   overflow: hidden;
}
.seamless-warp {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000; /* Other transform properties here */
}
</style>
